<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table :data="tableData" style="width: 100%">
            <el-table-column label="用户昵称" prop="username" align="center"/>
            <el-table-column label="手机号" prop="phoneNum" align="center"/>
            <el-table-column label="角色" prop="role" align="center"/>
            <el-table-column align="center">
            <template #header>
                <el-input v-model="search" size="small" placeholder="请输入搜索内容" clearable>
                    <template #append>
                        <el-button @click="handleSearch()" icon="el-icon-search">
                            搜索
                        </el-button>
                    </template>
                </el-input>
            </template>
            <template #default="scope">
                <el-button size="small" icon="el-icon-edit" type="primary" 
                    :disabled="scope.row.role==='系统管理员'" 
                    @click="handleEdit(scope.$index, scope.row)" >重置密码</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 编辑弹出框 -->
        <el-dialog v-model="dialogFormVisible" title="用户" center>
            <el-card>
                <el-form :model="userForm">
                    <el-form-item label="用户昵称" :label-width="formLabelWidth">
                        <el-input v-model="userForm.username" disabled />
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="userForm.phoneNum" disabled/>
                    </el-form-item>
                    <el-form-item label="重置密码" :label-width="formLabelWidth">
                        <el-input type="password" v-model="userForm.pwd" clearable show-password/>
                    </el-form-item>
                </el-form>
            </el-card>
            <template #footer>
                <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                <el-button type="danger"  @click="saveEdit()">重置</el-button>
            </template>
        </el-dialog>
        </div>
        <!-- 分页 -->
        <el-card>
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                background="true"
                layout="total, prev, pager, next, jumper"
                :total="parseInt(totalNum)" 
                :page-sizes="pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>
    </div>
</template>

<script>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus"
import { useStore } from 'vuex'; 
import {map} from 'lodash';
import secret from '../utils/secret';
export default {
    name: "permission",
    setup(){
        let dialogFormVisible = ref(false)
        const store = useStore();
        onMounted(() => {
            getUserList();
        })
        const formLabelWidth = '140px'
        const userForm = reactive({
            username: '',//用户昵称
            phoneNum:"",//手机号
            pwd:'123456',//重置密码
        });
        const search = ref('');
        const handleSearch = ()=>{
            store.dispatch("SearchUser",{
                parameter:search.value,
                pageSize:pageSize.value,
                page:1,
            })
            .then(res=>{
                // console.log("@@@@@@@",res)
                if(res.code===200){
                    totalNum.value = res.obj.records
                    currentPage.value = res.obj.page
                    tableData.splice(0,tableData.length,...map(res.obj.rows,item=>{
                        return {
                            username:item.username,
                            phoneNum:item.phoneNum,
                            name:item.roles.length>0?item.roles[0].name:"",
                            role:item.roles.length>0?item.roles[0].nameZh:"",
                            Aid:item.id
                        }
                    }))
                }else{
                    ElMessage({
                        type:'error',
                        message:res.message,
                        center:true
                    })
                }   
            }).catch(err=>{
                console.log("搜索异常",err);
            })
        }

        const SearchNext = ()=>{
            store.dispatch("SearchUser",{
                parameter:search.value,
                pageSize:pageSize.value,
                page:currentPage.value,
            })
            .then(res=>{
                console.log("@@@@@@@",res)
                if(res.code===200){
                    totalNum.value = res.obj.records
                    currentPage.value = res.obj.page
                    tableData.splice(0,tableData.length,...map(res.obj.rows,item=>{
                        return {
                            username:item.username,
                            phoneNum:item.phoneNum,
                            name:item.roles.length>0?item.roles[0].name:"",
                            role:item.roles.length>0?item.roles[0].nameZh:"",
                            Aid:item.id
                        }
                    }))
                }else{
                    ElMessage({
                        type:'error',
                        message:res.message,
                        center:true
                    })
                }   
            }).catch(err=>{
                console.log("搜索异常",err);
            })
        } 

        watch(search,(val)=>{
            if(val===''){
                getUserList();
            }
        })

        const handleEdit = (index, row) => {
            dialogFormVisible.value = true;
            console.log(index, row)
            userForm.username = row.username;
            userForm.name = row.name;
            userForm.phoneNum = row.phoneNum;
            editIndex.value = index;
        }
        let editIndex = ref(-1);
        const saveEdit = ()=>{
            console.log("重置密码@@@",tableData[editIndex.value])
            ElMessageBox.confirm("确定要重置吗","提示",{
                type:"warning",
                center:true,
            }).then(()=>{
                store.dispatch("ResetPassword",{
                    newPassword:secret.Encrypt(userForm.pwd),
                    Aid:tableData[editIndex.value].Aid
                }).then(res=>{
                    if(res.code===200){
                        ElMessage({
                            type:"success",
                            message:"重置成功",
                            center:true
                        })
                    }else{
                        ElMessage({
                            type:"error",
                            message:"重置失败",
                            center:true 
                        })
                    }
                }).catch(err=>{
                    console.log("重置异常",err)
                })
                dialogFormVisible.value = false
            })
        }
        //用户表
        const tableData = reactive([]);
        const getUserList = ()=>{
            store.dispatch("GetAllUser",{
                pageSize:pageSize.value,
                page:currentPage.value,
            }).then(res=>{
                if(res.code===200){
                    totalNum.value = res.obj.records;
                    tableData.splice(0,tableData.length,...map(res.obj.rows,item=>{
                        return {
                            username:item.username,
                            phoneNum:item.phoneNum,
                            name:item.roles.length>0?item.roles[0].name:"",
                            role:item.roles.length>0?item.roles[0].nameZh:"",
                            Aid:item.id
                        }
                    }))
                    console.log("用户列表",tableData)
                }else{
                    ElMessage({
                        type:"error",
                        message:res.msg,
                        center:true
                    })
                }
            }).catch(err=>{
                console.log("获取用户列表异常",err)
            })
        }
        //分页
        let currentPage = ref(1);
        let pageSize = ref(5);
        let totalNum = ref(14);//总条数除以每页显示条数5
        const handleSizeChange = (val) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange = (val) => {
            console.log(`current page: ${val}`)
            if(search.value){
                SearchNext();
            }else{
                getUserList();
            }
        }
        return {
            userForm,
            dialogFormVisible,
            formLabelWidth,
            search,
            handleSearch,

            tableData,
            handleEdit,
            saveEdit,
            //分页
            currentPage,
            pageSize,
            totalNum,
            handleSizeChange,
            handleCurrentChange,
        }
    }
};
</script>

<style scoped>
    h1 {
        text-align: center;
        margin: 30px 0;
    }
    p {
        line-height: 30px;
        margin-bottom: 10px;
        text-indent: 2em;
    }
    .logout {
        color: #409eff;
    }
</style>